<template>
	<view>
		<view :style="{backgroundImage: 'url(' + masterImg + ')'}" style="width: 750rpx; height: 776rpx;">
			<view style="width: 750rpx; height: 776rpx; background: linear-gradient( 180deg, #FFE9DC 0%, #FFFFFF 100%);">
				<view class="user-info-container" style="padding-top: 200rpx; font-size: 0px;">
					<image v-if="isLogin" class="user-avatar" mode="aspectFill" :src="userData.avatar"></image>
					<image v-else class="user-avatar" mode="aspectFill" src="@/static/icon/topava.png"
						style="width: 120rpx;height: 120rpx;"></image>
					<view class="user-content" style="color: #111111;">
						<block v-if="isLogin">
							<view class="user-name">{{userData == null ? '请先登录' : userData.nickname}}</view>
							<view style="color: #999999; font-weight: 500;">
								{{userData == null ? '登录后畅享更多功能' : userData.mobile}}</view>
						</block>
						<view v-else class="user-name" @tap="toLogin">
							<view style="font-size: 36rpx;">您尚未登录，去登录</view>
							<view style="font-size: 28rpx;margin-top: 10rpx;color: #999999; font-weight: 500;">登录以体验更多功能
							</view>
						</view>
					</view>
					<view v-if="isLogin" @click="toMyInfo">
						<u-icon name="setting" size="48" color="#fff"></u-icon>
					</view>
				</view>
				
				<!-- 我的钱包 -->
				<view style="background: linear-gradient( 160deg, #8CA2F5 10%, #5263CE 100%);box-shadow: 0px 4rpx 12rpx 0px rgba(102,121,220,0.36);border-radius: 24rpx;padding: 24rpx;
				margin: 32rpx;color: #fff;display: flex;align-items: center;justify-content: space-between;margin-top: 2rpx;">
					<view>
						<view style="font-weight: bold;">
							<text>￥</text>
							<text style="font-size: 44rpx;">{{ userData.money? userData.money: '--'}}</text>
						</view>
						<view style="margin-top: 8rpx;font-size: 24rpx; font-weight: 500;">我的钱包(元)</view>
					</view>
					<view>
						<view style="border: solid 1px #fff;padding: 16rpx 24rpx;border-radius: 50rpx;" @tap="toPurse">
							<text style="font-size: 28rpx;padding-right: 4rpx;">查看</text>
							<u-icon name="arrow-right" size="24"></u-icon>
						</view>
					</view>
				</view>
				
				<view class="u-flex link-active" style="padding: 26rpx 32rpx; padding-bottom: 0;">
					<!-- @click="ordergoto('/pages/users/Order?selectedId=0')" -->
					<viiew class="u-flex-1" style="font-size: 32rpx;color: #666666;">订单</viiew>
					<!-- <u-icon name="arrow-right"></u-icon> -->
				</view>
				<view class="order-option-group">
					<view v-for="item in optionEnterLink" :key="item.label" class="item-grid-option box-active"
						@tap="handleGridOptionEnter(item)">
						<image class="item-icon" mode="aspectFit" :src="item.icon"></image>
						<text class="item-label">{{ item.label }}</text>
					</view>
				</view>
				
			</view>

			

		</view>
		
		<!-- 优惠券 -->
<!-- 		<view
			style="display: flex;align-items: center;justify-content: space-between;padding-left: 32rpx;padding-right: 32rpx;">
			<view style="width: 48%;background: #fff;border-radius: 16rpx;padding: 24rpx;display: flex;">
				<image src="@/static/icon/sc.png" mode="widthFix" style="width: 80rpx;"></image>
				<view style="margin-left: 20rpx;">
					<view style="font-size: 32rpx;color: #333333;">我的收藏</view>
					<view style="margin-top: 8rpx;">
						<text style="font-size: 36rpx;color: #0BB1EF;">0</text>
						<text>个</text>
					</view>
				</view>
			</view>
			<view style="width: 48%;background: #fff;border-radius: 16rpx;padding: 24rpx;display: flex;"
				@click="JumpTo('/pages/users/MyCoupon')">
				<image src="@/static/icon/yhq.png" mode="widthFix" style="width: 80rpx;"></image>
				<view style="margin-left: 20rpx;">
					<view style="font-size: 32rpx;color: #333333;">我的优惠券</view>
					<view style="margin-top: 8rpx;">
						<text
							style="font-size: 36rpx;color: #0BB1EF;">{{ userData.coupon? userData.coupon : '0'}}</text>
						<text>个</text>
					</view>
				</view>
			</view>
		</view> -->
		<!-- <u-gap height="24" bg-color="#F5F5F5"></u-gap> -->
		<!-- 我的订单 @tap="toOrders" -->
		
		<u-gap height="24" bg-color="#F5F5F5"></u-gap>
		<!-- 更多功能 -->
		<view style="display: flex; flex-direction: column; width: 100%; background-color: #fff;">
			<text style="padding: 32rpx; font-size: 32rpx; font-weight: bold;">更多功能</text>
			<view style="display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; align-items: center;">
				<view v-if="item.visible" v-for="(item, index) in moreServices" :key="index"
					style="display: flex; flex-direction: column; align-items: center; width: 25vw; height: 160rpx; "
					@click="goto(item.path)">
					<image :src="item.icon" style="width: 48rpx; height: 48rpx;"></image>
					<text style="font-size: 28rpx;margin-top: 16rpx;">{{item.label}}</text>
				</view>
			</view>
		</view>
		<view style="height: 180rpx;"></view>
		<!-- <view style="padding: 0 0 100rpx 0;">
			<view v-for="item in tabBarList" :key="item.label">
				<view class="u-flex  link-active" style="padding: 26rpx 32rpx;" @click="handleMenuEnter(item)">
					<image :src="item.icon" mode="widthFix" style="width: 48rpx;height: 48rpx;margin-right: 16rpx;"></image>
					<viiew class="u-flex-1">{{item.label}}</viiew>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view> -->
		<!-- <button v-if="isLogin" class="u-reset-button logout-btn box-active" @tap="logout">
			退出登录
		</button> -->
		<u-tabbar v-model="current" :list="tabbar" active-color="#0daff0" :mid-button="true"></u-tabbar>
	</view>

</template>

<script>
	import configUrl from 'utils/config.js';
	import {
		getTabbarConfig
	} from '@/common/tabbar';

	import {
		request
	} from 'utils/request.js';
	export default {
		name: "My",
		data() {
			return {
				current: 4,
				tabbar: getTabbarConfig(true),

				masterImg: configUrl.appurlNewImg + '/myBanner/mine-bg.png',
				ICON_DEFAULT_USERS: configUrl.appurlImg + '/assets/img/avatar.png',
				userData: {
					avatar: this.ICON_DEFAULT_USERS,
					nickname: '',
					money: 0,
					isCompany: 0,
					isAgent: 0,
				},
				isLogin: false,

				moreServices: [{
					icon: configUrl.appurlImg + "/app/icon_signin.png",
					label: "入驻中心",
					path: "/pages/user/settlein",
					visible: true
				}, {
					icon: configUrl.appurlImg + "/app/icon_share.png",
					label: "分享好友",
					path: "/pages/user/share",
					visible: true
				}, 
				// {
				// 	icon: configUrl.appurlImg + "/app/icon_law.png",
				// 	label: "城市合伙人",
				// 	path: "/pages/agent/Register",
				// 	visible: true
				// }, 
				{
					icon: configUrl.appurlImg + "/app/icon_law.png",
					label: "法律咨询",
					path: "/pages/user/law",
					visible: true
				}, {
					icon: configUrl.appurlImg + "/app/icon_address.png",
					label: "我的地址",
					path: "/pages/user/userAddress",
					visible: true
				}, {
					icon: configUrl.appurlImg + "/app/image-userinfo/icon_comments.png",
					label: "我的评价",
					path: "",
					visible: true
				}, {
					icon: configUrl.appurlImg + "/app/icon_call.png",
					label: "服务咨询",
					path: "/pages/users/Branches",
					visible: true
				}, {
					icon: configUrl.appurlImg + "/app/image-userinfo/icon_customerservice.png",
					label: "联系平台",
					path: "",
					visible: true
				}, ],
			};
		},
		onLoad(option) {
			// let roldId = uni.getStorageInfoSync("roleId");
			// this.$u.vuex("vuex_platformType", PlatformType.Agent);
		},
		computed: {
			optionEnterLink() {
				return [{
						icon: configUrl.appurlImg + "/app/icon_deposit.png",
						label: "待支付",
						url: "/pages/menu/order?selectedId=" + 1,
					},
					{
						icon: configUrl.appurlImg + "/app/icon_amount.png",
						label: "待接单",
						url: "/pages/menu/order?selectedId=" + 2,
					},
					{
						icon: configUrl.appurlImg + "/app/icon_wait_onsight.png",
						label: "等待上门",
						url: "/pages/menu/order?selectedId=" + 3,
					},
					{
						icon: configUrl.appurlImg + "/app/icon_completed.png",
						label: "已完成",
						url: "/pages/menu/order?selectedId=" + 4,
					},
					{
						icon: configUrl.appurlImg + "/app/icon_complain.png",
						label: "退款/售后",
						url: "/pages/menu/order?selectedId=" + 5,
					},
				];
			},
		},
		onShow() {
			// if (this.isLogin) {
			// }
			// this.dataList();
			this.userInfoData(); // 获取用户登录/最后一次订单
		},
		methods: {
			userInfoData() {
				request.getWithToken({
					url: '/user/userInfo'
				}).then(res => {
					console.log('userInfo：', res);
					if (res.data.user != 0) {
						let userData = res.data.user;
						this.userData.avatar = userData.avatar;
						this.userData.nickname = userData.nickname;

						this.isLogin = true;
						console.log('this.isLogin：', this.isLogin);
					}
				})
			},
			dataList() {
				let _this = this;
				userApi.getUserInfo().then((res) => {
					res.avatar = res.avatar.includes('https') ? res.avatar : configUrl.appurlImg + res.avatar;
					_this.userData = res;
					_this.isLogin = true
					_this.id = res.id;
				})
			},
			goto(path) {
				if (path == "") return;
				uni.navigateTo({
					url: path
				});
			},
			toLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			handleServiceEnter(item) {
				if (item.url) {
					uni.navigateTo({
						url: item.url
					});
				}
			},
			handleMenuEnter(item) {
				if (item.path) {
					uni.navigateTo({
						url: item.path
					});
				}
			},
			handleGridOptionEnter(item) {
				uni.switchTab({
					url: item.url
				});
			},
			logout() {
				uni.showModal({
					title: "提示",
					content: "确定要退出登录吗？",
					success: (res) => {
						if (res.confirm) {
							this.$store.commit("logout");
						}
					},
				});
			},
			toOrders() {
				uni.navigateTo({
					url: '/pages/users/OrderTabbar',
				});
			},
			toPurse() {
				uni.navigateTo({
					url: '/pages/user/wallet',
				});
			},
			toMyInfo() {
				uni.navigateTo({
					url: '/pages/user/userInfo',
				});
			},
			JumpTo(e) {
				uni.navigateTo({
					url: e,
				});
			},
			toAddress(id) {
				uni.navigateTo({
					url: '/pages/users/MyAddress?addid=' + id
				});
			},
			toMyCar(id) {
				uni.navigateTo({
					url: '/pages/users/MyCar?id=' + id
				})
			}
		},
	};
</script>

<style>
	page {
		background: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.user-info-container {
		padding: 30rpx;
		display: flex;
		align-items: center;
		// background-color: #fff;

		.user-avatar {
			display: block;
			width: 150rpx;
			height: 150rpx;
			background: #EBF5FE;
			border: 3rpx solid #FFF;
			border-radius: 50%;
		}

		.user-name {
			font-size: 36rpx;
			font-weight: bold;
		}

		.service-time {
			display: flex;
			align-items: center;
			font-size: 24rpx;

			.icon-vip {
				display: block;
				margin-right: 8rpx;
				width: 26rpx;
				height: 26rpx;
			}

			.buy-btn {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 28rpx;
				padding: 0 20rpx;
				height: 44rpx;
				font-size: 24rpx;
				color: #f39800;
				border: 1px solid #f39800;
				border-radius: 999px;
			}
		}

		.user-content {
			height: 100rpx;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			padding: 0 24rpx;
		}


	}

	.count-group {
		padding: 30rpx 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #fff;

		.item-count {
			position: relative;
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;

			&+.item-count::before {
				position: absolute;
				left: 0;
				top: 50%;
				content: "";
				display: block;
				height: 44rpx;
				border-left: 0.5px solid #e0e0e0;
				transform: translateY(-50%);
			}

			.count-label {
				margin-bottom: 8rpx;
				font-size: 24rpx;
				color: #999;
			}

			.count-value {
				font-weight: bold;
			}
		}
	}

	.service-enter {
		margin: 22rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #fff;
		border-radius: 8px;
		overflow: hidden;

		.item-service {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 32rpx 0;
			border-radius: 8rpx;

			.item-icon {
				display: block;
				margin-bottom: 14rpx;
				height: 64rpx;
				width: 64rpx;
			}

			.item-label {
				font-size: 24rpx;
			}
		}
	}

	.grid-option-group {
		margin: 22rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		background-color: #fff;
		border-radius: 8px;
		overflow: hidden;

		.item-grid-option {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: calc(100% / 3);
			padding: 32rpx 0;
			border-radius: 8rpx;

			.item-icon {
				display: block;
				margin-bottom: 20rpx;
				height: 80rpx;
				width: 80rpx;
			}

			.item-label {
				font-size: 24rpx;
			}
		}
	}

	.logout-btn {
		margin: 44rpx 22rpx 22rpx;
		background-color: #fff;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 8px;
	}

	.order-option-group {
		padding: 24rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		// background-color: #fff;
		overflow: hidden;

		.item-grid-option {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: calc(100% / 5);
			padding-bottom: 8rpx;

			.item-icon {
				display: block;
				margin-bottom: 20rpx;
				height: 64rpx;
				width: 64rpx;
			}

			.item-label {
				font-size: 26rpx;
				color: #666666;
			}
		}
	}
</style>